<template>
    <div class="box d_f f_d_c a_i_c">

  <div class="img p_r">
    <viewer>
    <img src=" ../../assets/background.png" alt="" class="user" id="img" v-if="!user.userVO.img" />
    
    <img :src="user.userVO.img" alt="" class="user" id="img" v-else />
</viewer>
    <div class="btn ">
    <div class="d_f">
    
                <el-upload
    class="avatar-uploader"
    :action="action"
    :headers="headers"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
  <el-icon class="btn_icon"><Upload  /></el-icon>
  </el-upload>
    </div>
       
    </div>
  </div>
        <p class="username">{{ user.userVO.name }}</p>
        <div class="wid">
            <div class="d_f ">
                <div class="label">所属部门</div>
                <div class="value">{{ user.userVO.deptName||'-' }}</div>
            </div>
            <div class="line m_t_12"></div>
            <div class="d_f top">
                <div class="label">邮箱</div>
                <div class="value">{{ user.userVO.email||'-' }}</div>
            </div>
            <div class="line m_t_12"></div>
            <div class="d_f top">
                <div class="label">绑定手机</div>
                <div class="value">{{ user.userVO.mobile||'-' }}</div>
                <img src="../../assets/edit.png" alt="" class="icon" @click="editPhone">
            </div>
            <div class="line m_t_12"></div>
            <div class="d_f top">
                <div class="label">角色权限</div>
                <div class="value">{{ user.userVO.empRoleIds }}</div>
            </div>
            <div class="line m_t_12"></div>
            <div class="d_f top">
                <div class="label">登录密码</div>
                <div class="value">***********</div>
                <img src="../../assets/edit.png" alt="" class="icon" @click="editPassword">
            </div>
            <div class="line m_t_12"></div>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, onMounted ,computed } from 'vue'
import { useRouter } from 'vue-router'
import {  Upload } from '@element-plus/icons-vue'
import { httpConfig } from '../../utils/config'
import {fileFormat} from '../../utils/date'
import {empHeadImg} from '../../api/login'
import { useStore } from '../../store/index';
type dataType={
    userVO:userVOItem,
    action:string,
    headers:headers
}
type userVOItem={
    name:string,
    email:string,
    mobile:string,
   id:string
}
type headers={
    token:string 
}
export default defineComponent({
    name: '',
    components:{
        Upload
    },
    setup() {
        const data:dataType = reactive({
            userVO: {
                name: '',
                email:'',
                mobile:'',
                id:'',
            },
            action:httpConfig.upload,
            headers:{
                token:localStorage.getItem('Token')
            }
        })
        const store = useStore();
        const user = computed(() => store.user);
        const router = useRouter()
        onBeforeMount(() => {
        //     if(localStorage.getItem('userVO')){
        //     data.userVO=JSON.parse(<string>localStorage.getItem('userVO'))
        //    }
        })
        onMounted(() => {
        })
        const editPassword = (): void => {
            router.push('/personal/editPassword')
        }
        const editPhone = (): void => {
            router.push('/personal/editPhone')
        }
        const beforeAvatarUpload=(file:any)=>{
            fileFormat(file,['png', 'jpg', 'jpeg','JPG'],'只能上传png,jpg,jpeg')
        }
        const handleAvatarSuccess=(e:any)=>{
       empHeadImg({headImg:e.data,id:user.value.userVO.id}).then(()=>{
        store.getUser()
       })
        }
        return {
            ...toRefs(data),
            editPassword,
            editPhone,
            beforeAvatarUpload,handleAvatarSuccess,
            user
        }
    }
})
</script>
<style scoped lang='scss'>
.box {
    background: linear-gradient(175deg, #F5F9FF 7%, #FFFFFF 61%);
    width: 100%;
    height: calc(100% - 96px);
    padding: 48px 0px;
    border: 1px solid #d9e1ec;
    border-radius: 6px;
   .img{
    width: 100px;
        height: 100px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
   }
   .img:hover{
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    
    .btn{
        display: block; 
        z-index: 999;
    }
    .user{
        opacity: 0.2;
    }
   }
   .btn_icon{
    font-size: 30px;
    color: #fff;
    
   }
   .btn{
    display: none;
    position: absolute;
    
   }
    .user {
        // display: none;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-size: 100% 100%;
        
        z-index: 1;
    }

    .username {
        color: rgba(0, 0, 0, 0.9);
        font-size: 20px;
        margin-top: 24px;
    }

    .wid {
        margin-top: 64px;
        margin-left: 40px;
    }

    .label {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.4);
        width: 108px;
    }

    .value {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.9);
        width: 200px;
    }

    .top {
        margin-top: 36px;
    }

    .icon {
        cursor: pointer;
        width: 16px;
        height: 16px;
        margin-top: 2px;
    }

    .line {
        width: 288px;
        border: 0.5px solid rgba(220, 227, 240, 0.4);
    }
}
</style>